<script lang="ts" setup>
import { computed } from 'vue'
import { useStyleStore } from '@/stores/style'
import {
  gradientBgDark,
  gradientBgPinkRed,
  gradientBgPurplePink,
} from '@/colors'

const props = defineProps<{
  bg: 'purplePink' | 'pinkRed'
}>()

const colorClass = computed(() => {
  if (useStyleStore().darkMode)
    return gradientBgDark

  switch (props.bg) {
    case 'purplePink':
      return gradientBgPurplePink
    case 'pinkRed':
      return gradientBgPinkRed
  }

  return ''
})
</script>

<template>
  <div
    class="flex min-h-screen items-center justify-center"
    :class="colorClass"
  >
    <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
  </div>
</template>
